<template>
  <div class="login-wrapper">
    <!--登录-->
    <div class="login">
      <div class="login-title">
        <img src="../../assets/imgs/login-logo2.png" height="44">
        {{$t('login.systemName')}}
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
               v-loading="loadFlag"
               :element-loading-text="$t('login.loadTxt')">
        <!--帐号-->
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" :placeholder="$t('login.account')" ref="usernameInput"
                    size="large"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input type="password" :placeholder="$t('login.pwd')" ref="passwordInput" v-model="ruleForm.password"
                    size="large"
                    @keyup.enter.native="submitForm('ruleForm')"></el-input>
        </el-form-item>
        <!--登录按钮-->
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">{{$t('login.login')}}</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loadFlag: false,
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message: this.$t('login.emptyAccount'), trigger: 'blur'}
          ],
          password: [
            {required: true, message: this.$t('login.emptyPwd'), trigger: 'blur'}
          ]
        }
        // loginImg: 'url(' + require('../../../static/imgs/login-bg.jpg') + ')'
      }
    },

     mounted () {
    if (navigator.language.indexOf("zh") >= 0) {
      this.$i18n.locale = 'zh-CN'
    } else if (navigator.language.indexOf("de") >= 0) {
      this.$i18n.locale = 'de'
    } else if (navigator.language.indexOf("en") >= 0) {
      this.$i18n.locale = 'en'
    } else if (navigator.language.indexOf("it") >= 0) {
      this.$i18n.locale = 'it'
    } else if (navigator.language.indexOf("da") >= 0) {
      this.$i18n.locale = 'da'
    } else if (navigator.language.indexOf("fr") >= 0) {
      this.$i18n.locale = 'fr'
    } else if (navigator.language.indexOf("nl") >= 0) {
      this.$i18n.locale = 'nl'
    } else if (navigator.language.indexOf("pt") >= 0) {
      this.$i18n.locale = 'pt'
    } else if (navigator.language.indexOf("es") >= 0) {
      this.$i18n.locale = 'es'
    } else if (navigator.language.indexOf("sv") >= 0) {
      this.$i18n.locale = 'sv-SE'
    } else {
      this.$i18n.locale = 'zh-CN' // 英语
    }
  },

    methods: {
      // 点击登录
      submitForm(formName) {
        let formData = new FormData()
        formData.append('uname', this.ruleForm.username)
        formData.append('pwd', this.ruleForm.password)
        this.$refs[formName].validate((valid) => {
          if (!valid) return
          this.loadFlag = true
          this.$axios.post(`${this.$REQ_URL}member&action=newshoplogin`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res => {
            if (res.data.state === 1) {
              const shopId = parseInt(res.data.msg)
              sessionStorage.setItem('shopId', shopId)
              sessionStorage.setItem('shopName', res.data.shopname)

              let dateTime = parseInt(res.data.endDate+ "000")

              sessionStorage.setItem('endDate', new Date(dateTime).toLocaleDateString())
              this.$message({
                showClose: true,
                message: this.$t('login.successLogin'),
                type: 'success',
                duration: 1e3
              })
              this.$router.push('/Home')
              // 密码错误
            } else if (res.data.state === 400) {
              this.$message({
                type: 'error',
                message: this.$t('login.passwordError')
              })
              this.$refs[formName].clearValidate('password')
              this.ruleForm.password = ''
              this.$refs.passwordInput.focus()
              // 账号错误
            } else if (res.data.state === 401) {
              this.$message({
                type: 'error',
                message: this.$t('login.accountError')
              })
              this.$refs[formName].clearValidate('username')
              this.$refs.usernameInput.focus()
            }
            this.loadFlag = false
          }).catch(err => {
            let res = err.response
            this.$message({
              type: 'error',
              message: res.data
            })
            this.loadFlag = false
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/mixin";
  //  登录
  .login-wrapper {
    position:fixed;
    top: 0;
    left: 0;
    @include wh(100%);
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    //  登录框
    .login {
      position: relative;
      @include wh(400px);
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      padding: 33px 50px 40px;
      border-radius: 5px;
      background: $fc;
      box-sizing: border-box;
      .login-title {
        margin: 0 auto 34px;
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-family: PingFang-SC-Semibold;
        font-weight: bold;
        font-size: 30px;
        color: #000;
        letter-spacing: 0;
        text-align: center;
        img {
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      .login-btn {
        margin-top: 32px;
        text-align: center;
        button {
          @include wh(100%, 45px);
          border: none;
          background: #14adff;
          border-radius: 100px;
        }
      }
    }
  }
</style>

